<template>
  <uni-popup ref="popup" type="bottom">
    <view class="bgWite">
      <view class="title flex flex-align flex-center">虚拟币抵扣</view>
      <view class="colse" @click="close">
        <uni-icons type="closeempty" size="20"></uni-icons>
      </view>
      <view style="margin: 30rpx;">
        <view class="balance">
          <view class="flex flex-align flex-center">
            <view style="text-align: center;">
              <view class="price">10,424</view>
              <view class="name">可用余额</view>
            </view>
            
          </view>
        </view>  
        <view class="miaoshu"><text>10积分</text>可抵扣<text>1元</text>，该商品最多可抵扣<text>10</text></view>
        <view class="inpts flex flex-align flex-b">
          <input type="number" placeholder="请输入" />
          <view class="name">积分</view>
        </view>
        <view class="flex flex-end red">您将用x积分抵扣x元</view>

      </view>
      
      <view class="submite" @click="subMite">
        确定
      </view>
    </view>
  </uni-popup>
</template>



<script setup lang="ts">
import { onMounted, ref } from 'vue'

defineProps({
  show: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['submit', 'update:show'])
onMounted(() => {})
const popup = ref<any>(null)
async function open() {
  popup.value?.open('bottom')
  updateShow(true)
}
function close() {
  popup.value?.close()
  updateShow(false)
}
function subMite(value: any) {
  emit('submit', value)
  close()
}
function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.bgWite{background: #fff;max-height: 1000rpx;border-radius: 30rpx 30rpx 0 0;position: relative;
  padding-bottom: 30rpx;
  .title{font-size: 32rpx;height:90rpx;}
  .colse{position: absolute;right: 30rpx;top:30rpx;}
  .submite{
   height: 80rpx;background: #FE7431;color: #fff;font-size: 32rpx;font-weight: bold;border-radius: 80rpx;display: flex;justify-content: center;align-items: center;
    font-size: 26rpx;margin: 30rpx 30rpx 0;
  }
}
.balance{
  padding:40rpx 0;background: #F5F6F7;border-radius: 20rpx;
  .price{font-size: 64rpx;color: #333;font-weight: bold;}
  .name{font-size: 26rpx;color: #969799;margin-left: 10rpx;}
 
}
.miaoshu{font-size: 26rpx;color: #333;margin-top: 40rpx;font-weight: bold;
  text{color: #FE7431;}
}
.inpts{height: 80rpx;background: #F5F6F7;border-radius: 40rpx;margin-top: 20rpx;padding-right:30rpx;font-size:26rpx;
  input{width: 600rpx;height: 100%;padding: 0 30rpx;}
  .name{width: 120rpx;text-align: right;}
}
.red{
  color: #FE7431;font-size: 26rpx;margin-top: 20rpx;font-weight: bold;
}
</style>
